<template>
  <div class="edit-project">
    <a-form-model
      ref="editProjectForm"
      @submit.prevent="submit"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
      :rules="rules"
      :model="form"
    >
      <a-form-model-item label="项目名称" ref="name" prop="name">
        <a-input @blur="fieldSingle('name')" v-model="form.name" placeholder="请填写项目名称"/>
      </a-form-model-item>
      <a-form-model-item label="保函品种" prop="guaranteeKind">
        <a-select v-model="form.guaranteeKind" placeholder="请选择保函品种">
          <a-select-option value="1">
            保函品种一
          </a-select-option>
          <a-select-option value="2">
            保函品种二
          </a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="保函类型" prop="guaranteeType">
        <a-select v-model="form.guaranteeType" placeholder="请选择保函类型">
          <a-select-option value="1">
            保函类型一
          </a-select-option>
          <a-select-option value="2">
            保函类型二
          </a-select-option>
        </a-select>
      </a-form-model-item>

      <a-form-model-item label="金额" ref="amount" prop="amount">
        <a-input @blur="fieldSingle('amount')" v-model="form.amount" placeholder="请填写金额" addon-after="万元"/>
      </a-form-model-item>
      <a-form-model-item label="期限" ref="term" prop="term">
        <a-input @blur="fieldSingle('term')" v-model="form.term" placeholder="请填写期限" addon-after="月"/>
      </a-form-model-item>
      <a-form-model-item label="费率" ref="rate" prop="rate">
        <a-input @blur="fieldSingle('rate')" v-model="form.rate" placeholder="请填写费率" addon-after="元"/>
      </a-form-model-item>
      <a-form-model-item label="附件上传" ref="zips" prop="zips">
        <a-upload :customRequest="customRequest1" @blur="() => {$refs.zips.onFieldBlur()}"
                  :defaultFileList="[{uid:-1,name:'招标文件',status:'done',url:this.enclosures[0]}]"
                  @change="() => {$refs.zips.onFieldChange()}">
          <a-button>
            <a-icon type="paper-clip"/>
            <span><span class="red-mask">*</span>招标文件</span>
          </a-button>
        </a-upload>
        <a-upload @blur="() => {$refs.zips.onFieldBlur()}"
                  @change="() => {$refs.zips.onFieldChange()}"
                  :customRequest="customRequest2"
                  :defaultFileList="[{uid:-1,name:'中标通知书',status:'done',url:this.enclosures[1]}]"
        >
          <a-button>
            <a-icon type="paper-clip"/>
            <span><span class="red-mask">*</span>中标通知书</span>
          </a-button>
        </a-upload>
        <a-upload @blur="() => {$refs.zips.onFieldBlur()}"
                  @change="() => {$refs.zips.onFieldChange()}"
                  :customRequest="customRequest3"
                  :defaultFileList="[{uid:-1,name:'招标文件2',status:'done',url:this.enclosures[2]}]"
        >
          <a-button>
            <a-icon type="paper-clip"/>
            <span><span class="red-mask">*</span>招标文件2</span>
          </a-button>
        </a-upload>
      </a-form-model-item>
      <a-form-model-item :wrapper-col="{offset:4}">
        <a-button type="primary" htmlType="submit">
          Submit
        </a-button>
      </a-form-model-item>
    </a-form-model>
  </div>
</template>

<script>
import db from '../../utils/localstorage'

export default {
  name: 'ProjectAdd',
  created() {
    this.user = db.get('USER')
    const id = this.$route.params.id
    this.$get(`/project/${id}`).then(res=>{
      if(res.data.code === '200'){
        this.form = res.data.data
        this.enclosures[0] = this.form.insideBasic
        this.enclosures[1] = this.form.insideLegal
        this.enclosures[2] = this.form.insideCounter
      }
    })
  },
  data() {
    let enclosures = []
    const validateZips = (rule, value, callback) => {
      if (enclosures.length < 3) {
        callback(new Error('三个压缩包都必须上传'))
      } else {
        callback()
      }
    }
    return {
      labelCol: {span: 4},
      wrapperCol: {span: 14},
      rules: {
        zips: [
          {
            validator: validateZips, trigger: 'change'
          }
        ],
        companyName: [
          {
            required: true,
            message: 'please input your companyName',
            trigger: 'blur',
          },
        ],
        contacts: [
          {
            required: true,
            message: 'please input your contacts',
            trigger: 'blur'
          },
        ],
        contactNumber: [
          {
            required: true,
            message: 'please input your contactNumber',
            trigger: 'blur'
          },
        ],
        guaranteeKind: [
          {required: true, message: 'please input your guaranteeKind', trigger: 'change'}
        ],
        guaranteeType: [
          {required: true, message: 'please input your guaranteeType', trigger: 'change'}
        ],
        name: [
          {
            required: true,
            message: 'please input your name',
            trigger: 'blur'
          },
        ],
        amount: [
          {
            required: true,
            message: 'please input your amount',
            trigger: 'blur'
          },
        ],
        term: [
          {
            required: true,
            message: 'please input your term',
            trigger: 'blur'
          },
        ],
        rate: [
          {
            required: true,
            message: 'please input your rate',
            trigger: 'blur'
          },
        ],
      },
      form: {
        guaranteeKind: undefined,
        guaranteeType: undefined,
        name: '',
        amount: '',
        term: '',
        rate: '',
      },
      enclosures
    }
  },
  computed: {
    formItemLayout() {
      const {formLayout} = this
      return formLayout === 'horizontal'
        ? {
          labelCol: {span: 4},
          wrapperCol: {span: 14},
        }
        : {}
    },
    buttonItemLayout() {
      const {formLayout} = this
      return formLayout === 'horizontal'
        ? {
          wrapperCol: {span: 14, offset: 4},
        }
        : {}
    }
  },
  methods: {
    fieldSingle(singleName) {
      this.$refs[singleName].onFieldBlur()
    },
    submit() {
      console.log('我被点击了')
      this.$refs.editProjectForm.validate((value, msgs) => {
        console.log(value,msgs)
        if (value === true) {
          console.log('进来了')
          const a = 1000
          const data = {
            projectId:this.form.projectId,
            name: this.form.name,
            amount: this.form.amount,
            term: this.form.term,
            rate: this.form.rate,
            guaranteeKind: this.form.guaranteeKind,
            guaranteeType: this.form.guaranteeType,
            createUserId: this.user.userId,
            createUsername: this.user.username,
            deptId: this.user.deptId,
            status: 1,
            insideBasic: this.enclosures[0],
            insideLegal: this.enclosures[1],
            insideCounter: this.enclosures[2]
          }
          console.log(a,data)
          this.$post('/project', data).then(res=>{
            this.$message.success('修改成功')
            this.$router.replace('/project/list')
          })
        }
      })
    },
    customRequest1(data) { // 上传提交
      const formData = new FormData()
      formData.append('file', data.file)
      this.saveFile(formData).then(res => {
        this.form.enclosures[0] = res.data.data
        data.onSuccess(res, data.file)
      })
    },
    customRequest2(data) { // 上传提交
      const formData = new FormData()
      formData.append('file', data.file)
      this.saveFile(formData).then(res => {
        this.form.enclosures[1] = res.data.data
        data.onSuccess(res, data.file)
      })
    },
    customRequest3(data) { // 上传提交
      const formData = new FormData()
      formData.append('file', data.file)
      this.saveFile(formData).then(res => {
        this.form.enclosures[2] = res.data.data
        data.onSuccess(res, data.file)
      })
    },
    saveFile(formData) {

      return this.$upload('/project/upload', formData)

    },
  }
}
</script>

<style>
.edit-project {
  width: 50%;
  position: relative;
  left: 50%;
  top: 10%;
  transform: translate(-50%);
}

.edit-project .ant-upload:nth-of-type(n + 1) {
  margin-top: 8px;
}

.red-mask {
  display: inline-block;
  margin: 0 5px;
  color: red;
}
</style>
